<template>
	<view>
		<view class="header50"></view>
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="fk" style="margin-left: 30rpx;" @click="handeleBase">
				<image style="width: 20rpx;height: 30rpx;" src="@/static/index/left.png" mode=""></image>
			</view>
			<view class="fk_title">{{setTitle()}}</view>
			<view class="fk" style="margin-right: 30rpx;">
			</view>
		</view>
		<view style="width: 100%;height: 155rpx;"></view>
		<div class="type-selector between" v-if="type !== 'detail'">
			<div class="item" @click="handeleType(item)" v-for="item in typeList"
				:class="{active:formData.type==item.title}">
				<div class="icon">
					<image v-if="formData.type==item.title" :src="item.icon" mode="widthFix" style="width:28rpx">
					</image>
					<image v-else :src="item.iconc" mode="widthFix" style="width:28rpx"></image>
				</div>
				<span v-if="lang=='zh'">{{$t(item.title)}}</span>
				<span v-if="lang=='ru'" class="header-title">{{$t(item.title)}}</span>

			</div>
		</div>

		<div class="title section-title">
			<div class="icon">
				<image src="/static/icon/info.png" mode="widthFix" style="width: 32rpx;"></image>
			</div>
			{{$t(formData.type)}}{{$t('信息')}}
		</div>

		<div class="section">
			<div class="label title2">{{$t('基础信息')}}</div>

			<div class="label">
				<text class="reqiured">*</text>{{$t(formData.type)}}{{$t('照片 （请至少上传3张不同角度的图片）')}}
			</div>

			<div class="file-list">
				<fileUploadVue :detail="isdisabled" :files.sync="model.logo" :max-count="3" file-type="image" />
			</div>

			<div class="form-item">
				<!-- 名称 -->
				<div class="label"><text class="reqiured">*</text>{{setModelTyle()}}</div>
				<input placeholder-style="font-weight: normal;" style="font-weight: bold;" maxlength="20" 
				v-if="lang=='zh'" type="text" v-model="model.name"
					:placeholder="`${$t('请输入您的')}${$t(formData.type)}${$t('名称')}`" :disabled="isdisabled">
				<input placeholder-style="font-weight: normal;" style="font-weight: bold;" maxlength="20" v-if="lang=='ru'" type="text" v-model="model.name_ru"
					:placeholder="`${$t('请输入您的')}${$t(formData.type)}${$t('名称')}`" :disabled="isdisabled">
			</div>

			<div class="between form-item">
				<div class="w-full">
					<!-- 类型 -->
					<div class="label"><text class="reqiured">*</text>{{setModelTyles()}}</div>
					<input type="text" v-model="lang=='zh'?model.category.name:model.category.name_ru"
						:placeholder="`${$t('请选择您的')}${$t(formData.type)}${$t('类型')}`" disabled />
				</div>
				<div class="down" v-if="!isdisabled" @click="handeleFormData">
					<image src="/static/icon/down.png" style="width: 40rpx;" mode="widthFix"></image>
				</div>
				<div class="down_is" v-if="isdisabled"></div>
			</div>

			<template v-if="formData.type==='汽运' || formData.type==='Автотранспорт'">
				<div class="form-item">
					<div class="label"><text class="reqiured">*</text>{{$t('车牌号')}}</div>
					<input style="font-weight: bold;" :maxlength="lang=='zh'?7:9" @input="validateLicensePlate" type="text"
						v-model="model.car_number" placeholder-style="font-weight: normal;" :placeholder="$t('请输入您的车牌号')" :disabled="isdisabled">

				</div>

				<div class="label">{{$t(formData.type)}}{{$t('尺寸')}}</div>
				<div class="between">
					<div class="form-item">
						<div class="label">{{$t('长')}}</div>
						<div class="between">
							<input @input="validateInput($event,'car_l')" type="number" v-model="model.car_l"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
					<div class="span"></div>
					<div class="form-item">
						<div class="label">{{$t('宽')}}</div>
						<div class="between">
							<input @input="validateInputItem($event,'car_w')" type="number" v-model="model.car_w"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
					<div class="span"></div>
					<div class="form-item">
						<div class="label">{{$t('高')}}</div>
						<div class="between">
							<input @input="validateInputItem($event,'car_h')" type="number" v-model="model.car_h"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
				</div>
			</template>
		</div>
		<div class="title section-title">
			<div class="icon">
				<image src="/static/icon/router.png" mode="widthFix" style="width: 32rpx;"></image>
			</div>
			{{$t('载货信息')}}
		</div>

		<div class="section">
			<div class="between">
				<div class="form-item">
					<div class="label"><text class="reqiured">*</text> {{$t('可载货重量')}}</div>
					<div class="between">
						<input type="number" @input="validateInputSex($event,'product_weight')"
							v-model="model.product_weight" :placeholder="$t('请输入')" :disabled="isdisabled">
						<div class="unit">
							kg
						</div>
					</div>
				</div>
				<div class="span"></div>
				<div class="form-item">
					<div class="label"><text class="reqiured">*</text>{{$t('可载货体积')}}</div>
					<div class="between">
						<input type="number" @input="validateInputSex($event,'product_volume')"
							v-model="model.product_volume" :placeholder="$t('请输入')" :disabled="isdisabled">
						<div class="unit">m³</div>
					</div>
				</div>
			</div>

			<div>
				<div class="label">{{$t('最大载货尺寸')}}</div>
				<div class="between">
					<div class="form-item">
						<div class="label">{{$t('长')}}</div>
						<div class="between">
							<input type="number" @input="validateInput($event,'goods_l')" v-model="model.goods_l"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
					<div class="span"></div>
					<div class="form-item">
						<div class="label">{{$t('宽')}}</div>
						<div class="between">
							<input type="number" @input="validateInputItem($event,'goods_w')" v-model="model.goods_w"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
					<div class="span"></div>
					<div class="form-item">
						<div class="label">{{$t('高')}}</div>
						<div class="between">
							<input type="number" @input="validateInputItem($event,'goods_h')" v-model="model.goods_h"
								:placeholder="$t('请输入')" :disabled="isdisabled">
							<div class="unit">m</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<div class="between" v-if="!isdisabled || model.transport_list.length>0">
			<div class="title section-title">
				<div class="icon">
					<image src="/static/icon/router.png" mode="widthFix" style="width: 32rpx;"></image>
				</div>
				<text class="reqiured">*</text>
				{{$t('运输路线')}}({{model.transport_list.length}})
			</div>
			<div class="add-route" v-if="!isdisabled">
				<image v-if="model.transport_list.length<10" @click="handeleAddRouter" src="/static/icon/add-route.png"
					mode="widthFix"></image>
			</div>
			<div class="add-route" v-if="isdisabled"></div>
		</div>
		<div class="section route" v-for="(item,index) in model.transport_list" :key="index">
			<div class="route-item">
				<div class="flex route-info">
					<div class="route">
						<u-notice-bar style="padding: 0rpx;" bgColor="#FFFFFF" color="#000000" speed="20" icon=""
							:text="lang=='zh'?item.departure_city.name:item.departure_city.name_ru" />
						<div class="route-line">
							<image src="/static/icon/route.png" mode="widthFix" style="width: 24rpx;"></image>
						</div>
					</div>

					<div class="route">
						<div style="width: 120rpx;">
							<u-notice-bar style="padding: 0rpx;" bgColor="#FFFFFF" color="#000000" speed="20" icon=""
								:text="lang=='zh'?item.reach_city.name:item.reach_city.name_ru" />
						</div>
					</div>
				</div>
				<div class="route time">{{item.speed}}{{$t('天')}}</div>
				<div class="del" @click="handeleRemove(index)" v-if="!isdisabled">
					<image src="/static/icon/del.png" mode="widthFix" style="width: 30rpx;"></image>
				</div>
				<div class="del" v-if="isdisabled"></div>
			</div>
		</div>
		<view v-if="!isdisabled && model.transport_list.length==0" class="yslxSelect">
			<view>{{$t('请选择')}}{{$t('运输路线')}}</view>
			<view class="ysBut" @click="handeleAddRouter">{{$t('添加')}}</view>
		</view>
		<div class="title section-title"
			v-if="!isdisabled || model.images.length > 0 || model.videos.length > 0 || model.files.length > 0">
			<div class="icon">
				<image src="/static/icon/order.png" mode="widthFix" style="width: 32rpx;"></image>
			</div>
			{{$t('竞标信息')}}
		</div>

		<div class="section"
			v-if="!isdisabled || model.images.length > 0 || model.videos.length > 0 || model.files.length > 0">
			<div class="title" style="margin-top: 0;" v-if="!isdisabled || model.images.length > 0">
				{{isdisabled?$t('图片'):$t('请上传图片')}}
			</div>
			<div class="file-list" v-if="!isdisabled || model.images.length > 0">
				<fileUploadVue :detail="isdisabled" :files.sync="model.images" :max-count="6" file-type="image" />
			</div>

			<div class="title" v-if="!isdisabled || model.videos.length > 0">
				{{isdisabled?$t('视频'):$t('请上传视频')}}
			</div>
			<div class="file-list" v-if="!isdisabled || model.videos.length > 0">
				<fileUploadVue :detail="isdisabled" :files.sync="model.videos" :max-count="6" file-type="video" />
			</div>

			<div class="title" v-if="!isdisabled || model.files.length > 0">
				{{isdisabled?$t('资质证明'):$t('请上传资质等文件')}}
			</div>
			<div class="file-list" v-if="!isdisabled || model.files.length > 0">
				<fileUploadVue :detail="isdisabled" :files.sync="model.files" :max-count="6" file-type="image" />
			</div>

		</div>


		<div style="width: 100%;height: 50rpx;"></div>
		<view v-if="!isdisabled" style="width: 438rpx;height: 80rpx;margin: 0 auto;">
			<u-button :disabled="isDisabled" :loading="isDisabled" @click="handelSubmit" type="success" shape="circle"
				custom-style="background: #06C36E;">{{$t('保存')}}</u-button>
		</view>

		<div class="route-selector" v-if="routeSelectorModalIsShow">
			<div class="selector-content">
				<div class="h1">{{$t('添加路线')}}</div>
				<div class="label">{{$t('出发城市')}}</div>
				<view ></view>
				<citySelectVue :text="textStart" @confirm="citySelectCbStart" />
				<div class="label">{{$t('到达城市')}}</div>
				<citySelectVue :text="textEnd" @confirm="citySelectCbEnd" />
				<div class="label">{{$t('运输天数')}}</div>
				<div class="between">
					<input @input="validateInputDays($event,'speed')" type="number" maxlength="3" v-model="Routes.speed"
						class="time" :placeholder="$t('请输入运输天数')">
					<div class="unit">{{$t('天')}}</div>
				</div>
				<div class="between">
					<div class="cancel" @click="handeleMetal">{{$t('关闭')}}</div>
					<div class="span"></div>
					<div class="submit" @click="handeleSetRoute">{{$t('确认添加')}}</div>
				</div>
			</div>
		</div>
		
		<u-picker :confirmText="$t('确定')" :cancelText="$t('取消')" @cancel="show=false" @confirm="handeleConfirm"
			:show="show" :columns="columns" :keyName="lang=='zh'?'label':'label_ru'"></u-picker>
	</view>
</template>

<script>
	import {
		saveVegucle
	} from '@/api/vehicle.js'
	import fileUploadVue from './components/fileUpload.vue';
	import citySelectVue from './components/citySelect.vue';
	export default {
		components: {
			fileUploadVue,
			citySelectVue
		},
		data() {
			return {
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				isDisabled: false,
				errorMessage: '',
				columns: [],
				show: false,
				textStart: this.$t('选择出发城市'),
				textEnd: this.$t('选择到达城市'),
				Imgurl: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com',
				lang: 'zh',
				isdisabled: false, //是否可编辑
				routeSelectorModalIsShow: false,
				formData: {
					type: "汽运"
				},
				typeList: [{
						pid: '744',
						title: "汽运",
						icon: "/static/icon/type1.png",
						iconc: "/static/icon/type1s.png",
					},
					{
						pid: '747',
						title: "火车",
						icon: "/static/icon/type2.png",
						iconc: "/static/icon/type2s.png",
					},
					{
						pid: '746',
						title: "海运",
						icon: "/static/icon/type3.png",
						iconc: "/static/icon/type3s.png",
					},
					{
						pid: '745',
						title: "空运",
						icon: "/static/icon/type4.png",
						iconc: "/static/icon/type4s.png",
					}

				],
				model: {
					user_id: '',
					name: '',
					name_ru: '',
					mode: '',
					car_category_id: '',
					car_number: '',
					car_l: '',
					car_w: '',
					car_h: '',
					product_weight: '',
					product_volume: '',
					goods_l: '',
					goods_w: '',
					goods_h: '',
					category: '',
					logo: [],
					filelist: [],
					category: {
						name: '',
						name_ru: ''
					},
					files: [],
					images: [],
					videos: [],
					transport_list: []
				}, //表单数据
				form: {
					departure_city: {
						name: ''
					},
					reach_city: {
						name: ''
					},
					speed: ''
				}, //添加路线
				id: '',
				Routes: {
					departure_city: {},
					reach_city: {},
					speed: ''
				}, //路线
				AutomobileType: [], //汽运类型
				type: ''
			}
		},
		onLoad(options) {
			if (options.type) {
				this.type = options.type
			}
			if (options.id) {
				this.id = options.id
			}
			if (options.isdisabled) {
				this.isdisabled = options.isdisabled
			}
			if (options.items) {
				this.model = JSON.parse(options.items)
				this.formData.type = this.model.mode
				this.setModelTyle()
				this.setModelTyles()
			}
			if (this.id == '') {
				this.model.mode = this.formData.type
			}
		},
		onShow() {
			this.lang = uni.getStorageSync('lang');
			this.$i18n.locale = uni.getStorageSync('lang');
			this.getLang()
			this.getCardType()
			this.getType('744')
		},
		methods: {
			validateInputDays(event, value) {
				const regex = new RegExp('^(?!0\\d)\\d{1,3}$');
				if (regex.test(event.detail.value)) {
					this.Routes[value] = event.detail.value
				} else {
					this.Routes[value] = ''
				}
			},
			// 2位数
			validateInput(event, value) {
				const regex = new RegExp('^(?:[1-9]\\d?|\\d)(\\.\\d{1,4})?$');
				if (regex.test(event.detail.value)) {
					this.model[value] = event.detail.value
				} else {
					this.model[value] = ''
				}
			},
			// 1位数
			validateInputItem(event, value) {
				const regex = new RegExp('^\\d{1}(\\.\\d{1,4})?$');
				if (regex.test(event.detail.value)) {
					this.model[value] = event.detail.value
				} else {
					this.model[value] = ''
				}
			},
			// 6位数
			validateInputSex(event, value) {
				const regex = new RegExp('^(?!0(\\d|\\.))([1-9]\\d{0,5}|0)(\\.\\d{1,4})?$');
				if (regex.test(event.detail.value)) {
					this.model[value] = event.detail.value
				} else {
					this.model[value] = ''
				}
			},
			handeleBase() {
				uni.navigateBack()
			},
			validateLicensePlate() {
				if (this.lang == 'zh') {
					const creg =
						/^([京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[a-zA-Z](([DF]((?![IO])[a-zA-Z0-9](?![IO]))[0-9]{4})|([0-9]{5}[DF]))|[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1})$/;
					if (this.model.car_number.length === 7) {

						if (creg.test(this.model.car_number)) {
							uni.showToast({
								icon: 'none',
								title: '有效车牌'
							})
						} else {
							uni.showToast({
								icon: 'none',
								title: '无效车牌'
							})
						}
					} else {
						uni.showToast({
							icon: 'none',
							title: '无效车牌'
						})
						return false;
					}
				} else {
					// const creg = /^[A-Z]{1,2}\d{3}[A-Z]{2} \d{2}$/;
					// if (this.model.car_number.length <= 9) {

					// 	if(creg.test(this.model.car_number)){
					// 		uni.showToast({
					// 			icon:'none',
					// 			title:'有效车牌'
					// 		})
					// 	}else {
					// 		uni.showToast({
					// 			icon:'none',
					// 			title:'无效车牌'
					// 		})
					// 	}
					// } else {
					// 	uni.showToast({
					// 		icon:'none',
					// 		title:'无效车牌'
					// 	})
					// 	return false;
					// }
				}
			},
			handeleMetal() {
				this.Routes.departure_city = {}
				this.Routes.reach_city = {}
				this.Routes.speed = ''
				this.routeSelectorModalIsShow = false
				this.textStart = this.$t('选择出发城市')
				this.textEnd = this.$t('选择到达城市')

			},
			close() {
				console.log('close');
				this.routeSelectorModalIsShow = false
				this.textStart = this.$t('选择出发城市')
				this.textEnd = this.$t('选择到达城市')
				this.Routes.speed = ''
			},
			open() {
				console.log('open');
			},
			// 名称
			setModelTyle() {
				switch (this.formData.type) {
					case '汽运':
						return this.$t('品牌')
						break;
					case '火车':
						return this.$t('车号')
						break;
					case '空运':
						return this.$t('航班号')
						break;
					case '海运':
						return this.$t('箱号')
						break;
					default:
						break;
				}
			},
			// 类型
			setModelTyles() {
				switch (this.formData.type) {
					case '汽运':
						return this.$t('车型')
						break;
					case '火车':
						return this.$t('车型')
						break;
					case '空运':
						return this.$t('机型')
						break;
					case '海运':
						return this.$t('箱型')
						break;
					default:
						break;
				}
			},
			handeleConfirm(e) {
				this.model.car_category_id = e.value[0].id
				this.model.category.name = e.value[0].label
				this.model.category.name_ru = e.value[0].label_ru
				this.show = false
			},
			handeleFormData() {
				this.show = true
			},
			handeleType(item) {
				this.columns = []
				this.model.category.name = ''
				this.model.category.name_ru = ''
				this.model.car_category_id = ''
				this.model.car_category_name = ''
				this.model.car_category_name_ru = ''
				this.model.mode = item.title
				this.formData.type = item.title
				this.getType(item.pid)
				this.setModelTyle()
				this.setModelTyles()
			},
			// 车型
			getType(pid) {
				uni.request({
					url: "https://app.gluz.com.cn/api/basic/getActionSheetList",
					data: {
						type: 'release_transport',
						pid: pid,
						lang: this.lang
					},
					success: res => {
						let AutomobileType = res.data.data.map(item => {
							return {
								label_ru: item.name_ru,
								label: item.name,
								id: item.id
							}
						})
						// 将AutomobileType包裹在外层数组
						let arrList = [AutomobileType]; // 这样将AutomobileType放入外层数组

						// 将arrList赋值给this.columns
						this.columns = arrList;
					}
				})
			},
			getCardType() {
				uni.request({
					url: "https://app.gluz.com.cn/api/basic/getActionSheetList",
					data: {
						type: 'release_transport',
						pid: '',
						lang: this.lang
					},
					success: res => {
						console.log('二级分类:', res);
					}
				})
			},
			citySelectCbEnd(value) {
				this.textEnd = value.column3.label
				this.Routes.reach_city.id = value.column3.value
				this.Routes.reach_city.mergename = value.column1.label + ',' + value.column2.label + ',' + value.column3
					.label
				this.Routes.reach_city.name = value.column3.label
				this.Routes.reach_city.name_ru = value.column3.label
			},
			citySelectCbStart(value) {
				this.textStart = value.column3.label
				this.Routes.departure_city.id = value.column3.value
				this.Routes.departure_city.mergename = value.column1.label + ',' + value.column2.label + ',' + value
					.column3.label
				this.Routes.departure_city.name = value.column3.label
				this.Routes.departure_city.name_ru = value.column3.label
			},
			handelSubmit() {
				if (this.model.logo.length < 3) {
					uni.showToast({
						title: this.$t(this.formData.type) + this.$t('照片 （请至少上传3张不同角度的图片）'),
						icon: 'none'
					})
				} else if (this.model.name == '' && this.model.name_ru == '') {
					uni.showToast({
						title: this.$t('请输入您的') + this.$t(this.formData.type) + this.$t('名称'),
						icon: 'none'
					})
				} else if (this.model.car_category_id == '') {
					uni.showToast({
						title: this.$t('请选择您的') + this.$t(this.formData.type) + this.$t('类型'),
						icon: 'none'
					})
				} else if (this.model.product_weight == '') {
					uni.showToast({
						title: this.$t('请输入') + this.$t('可载货重量'),
						icon: 'none'
					})
				} else if (this.model.product_volume == '') {
					uni.showToast({
						title: this.$t('请输入') + this.$t('可载货体积'),
						icon: 'none'
					})
				} else if (this.model.transport_list.length == 0) {
					uni.showToast({
						title: this.$t('请至少选择一条运输路线'),
						icon: 'none'
					})
				} else if (this.model.mode == '汽运') {
					if (this.model.car_number == '') {
						uni.showToast({
							title: this.$t('请输入您的车牌号'),
							icon: 'none'
						})
					} else {
						this.submit()
					}
				} else {

					this.submit()
				}
			},
			submit() {
				this.isDisabled = true
				if (!this.model.user_id) {
					this.model.user_id = uni.getStorageSync('user_id')
				}
				console.log('model:', this.model);
				if (this.model.name == '') {
					this.model.name = this.model.name_ru
				}
				if (this.model.name_ru == '') {
					this.model.name_ru = this.model.name
				}
				uni.showLoading({
					title: this.$t('加载中') + '...'
				});
				let data = JSON.parse(JSON.stringify(this.model))
				data.logo = data.logo.toString().replace(/https:\/\/gluz-oss\.oss-cn-beijing\.aliyuncs\.com/g,
					'');
				data.filelist = data.filelist.toString().replace(
					/https:\/\/gluz-oss\.oss-cn-beijing\.aliyuncs\.com/g, '');
				data.files = data.files.toString().replace(
					/https:\/\/gluz-oss\.oss-cn-beijing\.aliyuncs\.com/g, '');
				data.images = data.images.toString().replace(
					/https:\/\/gluz-oss\.oss-cn-beijing\.aliyuncs\.com/g, '');
				data.videos = data.videos.toString().replace(
					/https:\/\/gluz-oss\.oss-cn-beijing\.aliyuncs\.com/g, '');

				try {
					let par = data.transport_list.map(item => {
						return `${item.departure_city.id},${item.reach_city.id},${item.speed}`;
					});
					data.transport_list = par.join(';')
				} catch (e) {}

				saveVegucle(data).then(res => {
					uni.navigateBack()
					this.isDisabled = false
				})
			},
			// 获取当前语言
			getLang() {
				if (this.$i18n.locale == 'zh-Hans' || this.$i18n.locale == 'zh') {
					this.lang = 'zh'
				} else {
					this.lang = 'ru'
				}
			},

			videoErrorCallback(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			handeleRemove(index) {
				uni.showModal({
					title: this.$t('确认删除'),
					content: this.$t('是否确认删除当前运输路线'),
					confirmText: this.$t('确认'),
					cancelText: this.$t('取消'),
					success: res => {
						if (res.confirm) {
							this.model.transport_list.splice(index, 1)
						} else if (res.cancel) {}
					}
				});
			},
			handeleSetRoute() {
				if (Object.keys(this.Routes.departure_city).length === 0) {
					uni.showToast({
						title: this.$t('请选择您的') + this.$t('出发城市'),
						icon: 'none'
					})
				} else if (Object.keys(this.Routes.reach_city).length === 0) {
					uni.showToast({
						title: this.$t('请选择您的') + this.$t('到达城市'),
						icon: 'none'
					})
				} else if (this.Routes.speed === '0' || this.Routes.speed === '') {
					uni.showToast({
						title: this.$t('请输入运输天数'),
						icon: 'none'
					})
				} else {
					if (this.model.transport_list == "") {
						this.model.transport_list = []
						let Routes = JSON.stringify(this.Routes)
						this.model.transport_list.push(JSON.parse(Routes))
						this.routeSelectorModalIsShow = false
						// Routes: {
						// 	departure_city: {},
						// 	reach_city: {},
						// 	speed: ''
						// }, //路线
						this.Routes.departure_city = {}
						this.Routes.reach_city = {}
						this.textStart = this.$t('选择出发城市'),
							this.textEnd = this.$t('选择到达城市'),
							this.Routes.speed = ''
					} else {
						let Routes = JSON.stringify(this.Routes)
						this.model.transport_list.push(JSON.parse(Routes))
						this.routeSelectorModalIsShow = false
						this.Routes.departure_city = {}
						this.Routes.reach_city = {}
						this.textStart = this.$t('选择出发城市'),
							this.textEnd = this.$t('选择到达城市'),
							this.Routes.speed = ''
					}
				}

			},
			handeleAddRouter() {
				this.form = {
					departure_city: {
						name: ''
					},
					reach_city: {
						name: ''
					},
					speed: ''
				}
				this.routeSelectorModalIsShow = true
			},
			setTitle() {
				if (this.type === 'add') {
					return this.$t('新增车辆')
				} else if (this.type === 'edit') {
					return this.$t('编辑车辆')
				} else {
					return this.$t('车辆详情')
				}

			}
		},
		onUnload() {
			this.isdisabled = false
			this.id = ''
			this.type = ''
			console.log('页面卸载');
		},
		onReady() {
			uni.setNavigationBarTitle({
				title: this.setTitle()
			})
		},
	}
</script>

<style lang="less">
	.wrapper {
		width: 100rpx;
		height: 50rpx;
		padding: 20rpx;
		position: relative;
		overflow: hidden;
		/* 隐藏溢出的内容 */
	}

	.scroll-text {
		white-space: nowrap;
		/* 防止文字换行 */
		position: absolute;
		top: 0;
		left: 100%;
		/* 初始位置在容器的右侧 */
		padding: 0;
		font-size: 16rpx;
		/* 你可以根据需求调整字体大小 */
		line-height: 50rpx;
		/* 设置行高使文字垂直居中 */
		animation: scroll-text 10s linear infinite;
		/* 滚动效果 */
	}

	@keyframes scroll-text {
		0% {
			transform: translateX(100%);
			/* 从右侧开始 */
		}

		100% {
			transform: translateX(-100%);
			/* 滚动到左侧 */
		}
	}

	.fk_title {
		font-size: 40rpx;
		font-weight: 500;
	}

	.fk {
		width: 40rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header50 {
		width: 100%;
		height: 51rpx;
		position: fixed;
		top: 0;
		background-color: #F1F2F4;
		z-index: 2;
	}

	.header {
		z-index: 2;
		width: 100%;
		height: 104rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		top: 50rpx;
		left: 0;
		background-color: #F1F2F4;
	}

	.header-title {
		font-size: 18rpx;
		width: 90rpx;
		/* 使文本占满容器 */
		white-space: normal;
		/* 允许换行 */
		word-wrap: break-word;
		/* 当单词过长时换行 */
		text-align: center;

	}

	.ysBut {
		width: 160rpx;
		height: 60rpx;
		background-color: #000000;
		color: #ffffff;
		border-radius: 8rpx;
		text-align: center;
		font-size: 24rpx;
		margin-top: 10rpx;
		line-height: 60rpx;
		padding: 0 15rpx;
		box-sizing: border-box;
	}

	.selector-cancel {
		width: 308rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3d3d3d;
		font-size: 28rpx;
	}

	.selector-submit {
		width: 308rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background: #06C36E;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 28rpx;
	}

	.selector-between {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 80rpx;
	}

	.selector-table {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		font-size: 26rpx;
	}

	.selector-h1 {
		width: 100%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selector-content {
		width: 690rpx;
		height: 650rpx;
		box-sizing: border-box;
		padding: 30rpx;
	}

	.yslxSelect {
		width: 100%;
		height: 120rpx;
		font-size: 26rpx;
		color: #AAAAAA;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
	}

	page {
		background-color: #F1F2F4;
		padding: 30rpx;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section {
		background-color: #fff;
		border-radius: 32rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin-bottom: 20rpx;

		.label {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8px;
		}
	}

	.title {
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		margin-top: 32rpx;
		font-size: 26rpx;
		color: #1d1d1d;

		.icon {
			width: 30rpx;
			height: 30rpx;
			margin-right: 8rpx;
		}
	}

	.type-selector {
		background-color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 50rpx;

		.active {
			color: #fff !important;
			background: #06C36E;
			font-weight: bold;
			box-shadow: 0rpx 3.97rpx 9.92rpx 0rpx rgba(6, 195, 110, 0.6);
		}

		.item {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 147rpx;
			height: 60rpx;
			border-radius: 198.45rpx;
			color: #1d1d1d;
			font-size: 24rpx;

			.icon {
				width: 40rpx;
				height: 40rpx;
				margin-right: 8rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

	}

	.form-item {
		background-color: #F6F7FB;
		margin-bottom: 20rpx;
		border-radius: 25rpx;
		min-height: 100rpx;
		padding: 20rpx;
		box-sizing: border-box;

		input {
			font-size: 26rpx;
		}
	}

	.w-full {
		width: 100%;
	}

	.down_is {
		width: 70rpx;
		height: 70rpx;
	}

	.down {
		width: 70rpx;
		height: 70rpx;
		border-radius: 100rpx;
		background: #1D1D1D;
		margin-left: 22rpx;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		padding-top: 5rpx;
		padding-right: 2rpx;
	}

	.submit {
		width: 438rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background: #06C36E;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		margin: 50rpx auto;
		margin-bottom: 100rpx;
		font-size: 28rpx;
	}

	.cancel {
		width: 438rpx;
		height: 80rpx;
		border-radius: 50rpx;
		background: #eee;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #3d3d3d;
		margin: 50rpx auto;
		font-size: 28rpx;
	}

	.span {
		width: 25rpx;
		flex-shrink: 0;
	}

	.unit {
		color: #1d1d1d;
		font-size: 26rpx;
		flex-shrink: 0;
		margin-left: 8px;
	}

	.file-list {
		display: flex;
		margin-bottom: 20rpx;
		flex-wrap: wrap;

		.pic {
			width: 130rpx;
			height: 130rpx;
			background-color: #F6F7FB;
			border-radius: 12rpx;
			margin-right: 16rpx;
			position: relative;
			margin-bottom: 16rpx;

			.del {
				position: absolute;
				right: 15rpx;
				top: 15rpx;
			}
		}

		.add {
			box-sizing: border-box;
			padding: 40rpx;

			&:active {
				background: #eee;
			}

			image {
				width: 100%;
			}
		}
	}

	.title2 {
		color: #1D1D1D !important;
		font-weight: bold;
		font-size: 26rpx !important;
	}


	.route {
		background-color: #F6F7FB;
	}

	.route-item {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.route {
			width: 100rpx;
			text-overflow: ellipsis;
			overflow: hidden;
			word-break: break-all;
			white-space: nowrap;
			background-color: #fff;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			font-size: 26rpx;
			color: #1d1d1d;
			position: relative;
			margin-right: 30rpx;
			white-space: nowrap;
			min-width: 110rpx;
			text-align: center;
		}

		.route-info {
			width: 580rpx;
			display: flex;
			overflow-x: auto;
			white-space: nowrap;
		}

		.time {
			margin-left: 16rpx;
		}

		.route-line {
			width: 44rpx;
			height: 34rpx;
			position: absolute;
			right: -34/2px;
			background-color: #fff;
			top: 50%;
			transform: translateY(-50%);
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.del {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			border-radius: 30rpx;
			flex-shrink: 0;

			&:active {
				background-color: #ddd;
			}
		}
	}

	.reqiured {
		color: red;
		margin-right: 8rpx;
	}

	.section-title {
		margin-left: 16rpx;
	}

	.add-route {
		width: 50rpx;
		height: 50rpx;
		margin-right: 23rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;

		&:active {
			background-color: #fff;
		}

		image {
			width: 30rpx;
			height: 30rpx;
		}
	}


	.route-selector {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 9;
		top: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.5);

		.selector-content {
			position: absolute;
			top: 50%;
			width: 90%;
			left: 5%;
			transform: translateY(-50%);
			background-color: #fff;
			border-radius: 50rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			input {
				font-size: 28rpx;
			}

			.label {
				font-size: 26rpx;
				color: #333;
				margin-bottom: 16rpx;
				margin-top: 24rpx;
			}

			.time {
				width: 100%;
			}

			.unit {
				flex-shrink: 0;
				color: #999;
			}

			.h1 {
				text-align: center;
				padding: 30rpx 0;
				font-size: 28rpx;
				color: #333;
			}

			.submit {
				margin: 30rpx auto;
			}
		}
	}
</style>